<template>
  <a-card style="border-radius: 10px;max-width: 930px;box-shadow:4px 4px 8px #d3d2d2" :bordered="false">
    <template #title>
      <div style="font-size: 18px;color: #535353">
        <h2>标签 - {{labelSet.length}}</h2>
      </div>
    </template>
    <span v-for="(item,index) in labelSet" :key="index" style="font-size: 20px;gap: 5px;" >
        <el-tag checked style="cursor: pointer"
                @click="handleClickTag(item.label)"
                :size="sizeByNumber(Number(item.count))"
                :type="item.label === 'loser' ? 'volcano' : item.count > 1 ? '' :'info' ">
          <span style="font-size: 14px;">{{item.label}}</span>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;{{item.count}}
        </el-tag>
        &nbsp;&nbsp;
      </span>
  </a-card>
</template>

<script setup>
import {TagsFilled} from "@ant-design/icons-vue"
import {onMounted, ref} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const labelSet=ref([])
const store=useStore()
const router=useRouter()
const countSum=ref()
const countAvg=ref()

function sizeByNumber(n) {
  if (n>countAvg.value){
    return "large"
  }else if (n>1){
    return "default"
  }else
    return "small"
}

onMounted(()=>{
  labelSet.value=store.getters.getLabelSet
  labelSet.value.forEach((ivalue)=>{
    countSum.value+=Number(ivalue.count)
  })
  countAvg.value=countSum.value/labelSet.value.length
  console.log("countSum  :",countSum.value,"countAvg  :",countAvg.value)
})

const handleClickTag = (label) => {
  router.push("/visitor/getList/label/by/"+label)
}
</script>

<style scoped>

</style>